<template>
    <div class="wrapper">
        <div class="title">
            我的订单
        </div>
        <div class="orders">
            <div
                class="order"
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="order__title">
                    {{item.shopName}}
                    <span class="order__status">
                        {{ item.isCanceled ? '已取消' : '已下单' }}
                    </span>
                </div>
                <div class="order__content">
                    <div class="order__content__imgs">
                        <template
                            v-for="(innerItem, innerIndex) in item.products"
                            :key="innerIndex"
                        >
                            <img
                            class="order__content__img" 
                            :src="innerItem.product.img"
                            v-show="innerIndex <= 3"
                            >
                        </template>
                    </div>
                    <div class="order__content__info">
                        <div class="order__content__price">￥{{item.total}}</div>
                        <div class="order__content__count">共{{ item.totalNumber }}件</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部导航栏组件 -->
    <Docker :currentIndex="2"/>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { get } from '../../utils/request'
import Docker from '../../components/Docker';
// 处理订单列表逻辑
const useOrderListEffect = () => {
    const data = reactive( { list:[] } )
    const getNearbyList = async () => {
        const result = await get('/api/order')
        if (result?.errno === 0 && result?.data?.length) {

            const orderList = result.data;
            // 计算总价逻辑
            orderList.forEach( (order) => {
                const products = order.products || [] ;
                let totalPrice = 0;
                let totalNumber = 0;
                products.forEach( (productItem)=>{
                    totalNumber += ( productItem?.orderSales || 0 );
                    totalPrice += ( (productItem?.product?.price * productItem?.orderSales) || 0 );
                });
                order.total = totalPrice;
                order.totalNumber = totalNumber;
            });
            data.list = result.data;
        }
  }
  
  getNearbyList();
  const { list } = toRefs(data);
  return { list }
}


export default{
    name: 'OrderList',
    components:{ Docker },
    setup(){
        const { list } = useOrderListEffect();
        console.log(list, "---------------------list");
        return{ list }
    }
}

</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.wrapper{
    overflow-y:auto ;
    position: absolute;
    left: 0;
    top: 0;
    bottom: .5rem;
    right: 0;
    /* padding: 0 .18rem .1rem .18rem; */
    background-color: #eee;
}
.title{
    line-height: .44rem;
    font-size: .16rem;
    color: content-fontcolor;
    background: rgb(248, 248, 248);
    text-align: center;
}
.orders{

}
.order{
    padding: .16rem;
    margin: .16rem .18rem;
    background-color: #fff;
    &__title{
        margin-bottom: .16rem;
        font-size: .16rem;
        color:content-fontcolor;
        line-height: .22rem;
    }
    &__status{
        float: right;
        color: #999;
        font-size: .14rem;
    }
    &__content{
        display: flex;
        &__imgs{
            flex: 1;
        }
        &__img{
            width: .4rem;
            height: .4rem;
            margin-right: .12rem;
        }
        &__info{
            width: .7rem;
        }
        &__price{
            margin-bottom: .04rem;
            line-height: .2rem;
            font-size: .14rem;
            color: red;
            text-align: right;
        }
        &__count{
            line-height: .14rem;
            text-align: right;
            color: content-fontcolor;
        }
    }
}
</style>